Description: The legacy app enables automatic guest sign-in (SignInPage with auto and
providers={['guest']}), which can unintentionally allow unauthenticated access in non-dev
deployments if not gated by environment/config and may expose internal Backstage pages and
metadata.
App.tsx [80-84]

  components: {
    SignInPage: props => <SignInPage {...props} auto providers={['guest']} />,
  },
  themes: getAllThemes(),
});

• Create ticket/issue

Description:
bindRoutes({ bind }) { ... } is identical to existing route-binding blocks (e.g., Similar
Content 1). Consider reusing the existing module/function that defines these bindings (or
exporting a shared bindExternalRoutes helper) instead of duplicating the same bind(...)
calls.

PR Code:
App.tsx [63-79]

bindRoutes({ bind }) {
  bind(catalogPlugin.externalRoutes, {
    createComponent: scaffolderPlugin.routes.root,
    viewTechDoc: techdocsPlugin.routes.docRoot,
    createFromTemplate: scaffolderPlugin.routes.selectedTemplate,
  });
  bind(apiDocsPlugin.externalRoutes, {
    registerApi: catalogImportPlugin.routes.importPage,
  });
  bind(scaffolderPlugin.externalRoutes, {
    registerComponent: catalogImportPlugin.routes.importPage,
    viewTechDoc: techdocsPlugin.routes.docRoot,
  });
  bind(orgPlugin.externalRoutes, {
    catalogIndex: catalogPlugin.routes.catalogIndex,
  });
},

Codebase Context Code:
redhat-developer/rhdh-plugins/workspaces/dcm/packages/app/src/App.tsx [61-77]

 bindRoutes({ bind }) {
   bind(catalogPlugin.externalRoutes, {
     createComponent: scaffolderPlugin.routes.root,
     viewTechDoc: techdocsPlugin.routes.docRoot,
     createFromTemplate: scaffolderPlugin.routes.selectedTemplate,
   });
   bind(apiDocsPlugin.externalRoutes, {
     registerApi: catalogImportPlugin.routes.importPage,
   });
   bind(scaffolderPlugin.externalRoutes, {
     registerComponent: catalogImportPlugin.routes.importPage,
     viewTechDoc: techdocsPlugin.routes.docRoot,
   });
   bind(orgPlugin.externalRoutes, {
     catalogIndex: catalogPlugin.routes.catalogIndex,
   });
 },

Description:
SidebarLogo is duplicated verbatim (matches Similar Content 8 and several others). Reuse
the existing SidebarLogo component (export/import it) rather than redefining it in the PR.

PR Code:
Root.tsx [62-73]

const SidebarLogo = () => {
  const classes = useSidebarLogoStyles();
  const { isOpen } = useSidebarOpenState();

  return (
    <div className={classes.root}>
      <Link to="/" underline="none" className={classes.link} aria-label="Home">
        {isOpen ? <LogoFull /> : <LogoIcon />}
      </Link>
    </div>
  );
};

Codebase Context Code:
redhat-developer/rhdh-plugins/workspaces/konflux/packages/app/src/components/Root/Root.tsx [61-72]

const SidebarLogo = () => {
 const classes = useSidebarLogoStyles();
 const { isOpen } = useSidebarOpenState();

 return (
   <div className={classes.root}>
     <Link to="/" underline="none" className={classes.link} aria-label="Home">
       {isOpen ? <LogoFull /> : <LogoIcon />}
     </Link>
   </div>
 );
};

Description:
The Root sidebar layout shown matches the beginning portion of the existing Root
implementation (Similar Content 16) up to the visible scope boundary. Prefer importing and
extending the existing Root (or extracting a shared AppSidebar component) instead of
duplicating the same sidebar structure and items.

PR Code:
Root.tsx [75-117]

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      <SidebarLogo />
      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
        <SidebarSearchModal />
      </SidebarGroup>
      <SidebarDivider />
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* Global nav, not org-specific */}
        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
        <MyGroupsSidebarItem
          singularTitle="My Group"
          pluralTitle="My Groups"
          icon={GroupIcon}
        />
        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
        {/* End global nav */}
        <SidebarDivider />


 ... (clipped 22 lines)

Codebase Context Code:
redhat-developer/rhdh-plugins/workspaces/konflux/packages/app/src/components/Root/Root.tsx [74-111]

export const Root = ({ children }: PropsWithChildren<{}>) => (
 <SidebarPage>
   <Sidebar>
     <SidebarLogo />
     <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
       <SidebarSearchModal />
     </SidebarGroup>
     <SidebarDivider />
     <SidebarGroup label="Menu" icon={<MenuIcon />}>
       {/* Global nav, not org-specific */}
       <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
       <MyGroupsSidebarItem
         singularTitle="My Group"
         pluralTitle="My Groups"
         icon={GroupIcon}
       />
       <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
       <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
       <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
       {/* End global nav */}


... (clipped 18 lines)

Objective: To create a detailed and reliable record of critical system actions for security analysis
and compliance.

Status:
Incomplete diff coverage: Several added/modified files were not included in the provided diff, so it cannot be
verified whether any newly introduced critical actions require audit logging and have the
required context.

/*
 * Copyright Red Hat, Inc.

Learn more about managing compliance generic rules or creating your own custom rules

Objective: Ensure all identifiers clearly express their purpose and intent, making code
self-documenting

Status:
Incomplete diff coverage: Because multiple changed files were omitted from the diff, naming clarity and identifier
intent across the newly added NFS/legacy app code cannot be fully validated.

/*
 * Copyright Red Hat, Inc.

Learn more about managing compliance generic rules or creating your own custom rules

Objective: Ensure comprehensive error handling that provides meaningful context and graceful
degradation

Status:
Incomplete diff coverage: Newly added/modified application entrypoints and modules were not fully visible in the
diff, preventing verification that potential failure points include robust error handling
and edge case management.

/*
 * Copyright Red Hat, Inc.

Learn more about managing compliance generic rules or creating your own custom rules

Objective: To prevent the leakage of sensitive system information through error messages while
providing sufficient detail for internal debugging.

Status:
Incomplete diff coverage: The diff does not include all new/updated UI and routing code paths, so it cannot be
confirmed that any user-facing errors introduced remain generic and do not expose internal
details.

/*
 * Copyright Red Hat, Inc.

Learn more about managing compliance generic rules or creating your own custom rules

Objective: To ensure logs are useful for debugging and auditing without exposing sensitive
information like PII, PHI, or cardholder data.

Status:
Incomplete diff coverage: With several application files omitted from the diff, it cannot be verified whether new
logging was introduced and, if so, whether it is structured and free of sensitive data.

"@backstage/backend-defaults": "^0.14.0",
"@backstage/config": "^1.3.6",

Learn more about managing compliance generic rules or creating your own custom rules

Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent
vulnerabilities

Status:
Incomplete diff coverage: Search/navigation and other user-input-related components were not fully included in the
diff, so it cannot be confirmed that any newly introduced external inputs are
validated/sanitized and handled securely.

/*
 * Copyright Red Hat, Inc.

Learn more about managing compliance generic rules or creating your own custom rules

Restore the missing RequirePermission check for the /catalog-import route to
prevent a critical security vulnerability that allows unauthorized access.

workspaces/theme/packages/app/src/App.tsx [130-160]

 <AppRouter>
   <div>
     <FlatRoutes>
       <Route path="/catalog" element={<CatalogIndexPage />} />
       <Route
         path="/catalog/:namespace/:kind/:name"
         element={<CatalogEntityPage />}
       >
         {entityPage}
       </Route>
       <Route path="/docs" element={<TechDocsIndexPage />} />
       <Route
         path="/docs/:namespace/:kind/:name/*"
         element={<TechDocsReaderPage />}
       >
         <TechDocsAddons>
           <ReportIssue />
         </TechDocsAddons>
       </Route>
       <Route path="/create" element={<ScaffolderPage />} />
       <Route path="/api-docs" element={<ApiExplorerPage />} />
       {/* Top-level element must be a plugin component for convertLegacyApp */}
-      <Route path="/catalog-import" element={<CatalogImportPage />} />
+      <Route
+        path="/catalog-import"
+        element={
+          <RequirePermission permission={catalogEntityCreatePermission}>
+            <CatalogImportPage />
+          </RequirePermission>
+        }
+      />
       <Route path="/search" element={<SearchPage />}>
         {searchPage}
       </Route>
       <Route path="/settings" element={<UserSettingsPage />} />
       <Route path="/catalog-graph" element={<CatalogGraphPage />} />
     </FlatRoutes>
   </div>
 </AppRouter>

• Apply / Chat

Instead of creating a parallel app-legacy package, perform the New Frontend
System (NFS) migration within the existing app package. Use the provided
compatibility APIs for a smoother, incremental transition and to avoid the
maintenance overhead of a duplicated application.

Examples:

{
  "name": "app-legacy",
  "version": "0.0.0",
  "private": true,
  "bundled": true,
  "repository": {
    "type": "git",
    "url": "https://github.com/redhat-developer/rhdh-plugins",
    "directory": "workspaces/theme/packages/app-legacy"
  },

 ... (clipped 75 lines)

/*
 * Copyright Red Hat, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software

 ... (clipped 125 lines)

Solution Walkthrough:

Before:

// File structure has two separate apps
/packages/
  app/
    - src/App.tsx (New NFS implementation)
  app-legacy/
    - src/App.tsx (Old legacy implementation)

// workspaces/theme/packages/app/src/App.tsx
import { createApp } from '@backstage/frontend-defaults';
import { convertLegacyApp } from '@backstage/core-compat-api';
// ...
const app = createApp({
  features: [
    ...convertLegacyApp(legacyRootElement),
    // ... other NFS features
  ],
});
export default app.createRoot();

// workspaces/theme/packages/app-legacy/src/App.tsx (new file)
import { createApp } from '@backstage/app-defaults';
const app = createApp({ apis, themes, ... });
export default app.createRoot(<Root>{routes}</Root>);

After:

// File structure has only one app
/packages/
  app/
    - src/App.tsx (Hybrid NFS/Legacy implementation)
  // app-legacy/ directory is removed

// workspaces/theme/packages/app/src/App.tsx
// The migration is done within the single 'app' package,
// using compatibility APIs to bridge legacy and NFS features
// without duplicating the entire application.

import { createApp } from '@backstage/frontend-defaults';
import { convertLegacyApp } from '@backstage/core-compat-api';
// ...

const legacyRootElement = (
  <AppRouter>
    {/* All legacy routes and components are defined here */}
  </AppRouter>
);

const app = createApp({
  features: [
    // Convert all legacy routes and plugins to NFS features
    ...convertLegacyApp(legacyRootElement),
    // New NFS-native features can be added here
  ],
});
export default app.createRoot();

Update the to prop in SidebarItem components to use absolute paths (e.g.,
/api-docs) for consistent and reliable navigation.

workspaces/theme/packages/app/src/components/Root/Root.tsx [90-92]

-<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-<SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
-<SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+<SidebarItem icon={ExtensionIcon} to="/api-docs" text="APIs" />
+<SidebarItem icon={LibraryBooks} to="/docs" text="Docs" />
+<SidebarItem icon={CreateComponentIcon} to="/create" text="Create..." />

• Apply / Chat

Add a null check for the root DOM element before rendering the React app to
prevent potential startup crashes.

workspaces/theme/packages/app-legacy/src/index.tsx [22]

-ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error('Failed to find the root element');
+}
+ReactDOM.createRoot(rootElement).render(<App />);

• Apply / Chat

Update the import path for makeStyles from @material-ui/core to
@material-ui/core/styles.

workspaces/theme/packages/app/src/modules/nav/LogoFull.tsx [16]

-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';

• Apply / Chat

Improve SVG accessibility by adding a role="img" attribute, a <title> element, and an
aria-labelledby attribute to the logo.

workspaces/theme/packages/app/src/modules/nav/LogoFull.tsx [32-41]

 <svg
   className={classes.svg}
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 2079.95 456.05"
+  role="img"
+  aria-labelledby="logoFullTitle"
 >
+  <title id="logoFullTitle">Application Full Logo</title>
   <path
     className={classes.path}
     d="M302.9,180a80.62,80.62,0,0,0,13.44-10.37c..."
   />
 </svg>

• Apply / Chat

Refactor the component to use JSS (makeStyles) for dynamic styling based on the
isOpen state, instead of using inefficient and conflict-prone inline styles.

workspaces/theme/packages/app/src/modules/nav/SidebarLogo.tsx [40-60]

 export const SidebarLogo = () => {
-  const classes = useSidebarLogoStyles();
   const { isOpen } = useSidebarOpenState();
-  const sidebarWidth = isOpen
-    ? sidebarConfig.drawerWidthOpen
-    : sidebarConfig.drawerWidthClosed;
+  const classes = useSidebarLogoStyles({ isOpen });
 
   return (
-    <div className={classes.root} style={{ width: sidebarWidth }}>
-      <Link
-        to="/"
-        underline="none"
-        className={classes.link}
-        aria-label="Home"
-        style={{ width: sidebarWidth }}
-      >
+    <div className={classes.root}>
+      <Link to="/" underline="none" className={classes.link} aria-label="Home">
         {isOpen ? <LogoFull /> : <LogoIcon />}
       </Link>
     </div>
   );
 };

• Apply / Chat